import React,{Component} from 'react';
import {connect} from  'react-redux';
import { Button, message,Modal} from 'antd';
import  '../style.scss';
import  FilePage from './filePage';
import  FileConnectPage from './fileConnectPage';


const steps = [
  {
    title: '1',
    page:<FilePage/>
  },
  {
    title: '2',
    page:<FileConnectPage/>
  },
];

class FileConnect extends Component{
    constructor(props) {
        super(props);
        this.state = {
          current: 0,
          visible:false
        };
      }
      clearCurrent=()=>{
        this.setState({
          current:0
        })
      }
      handleOk = e => {
        console.log(e);
        message.success("挂载成功")
        this.props.cancelDBModal();
        this.clearCurrent();
      };
    
      next() {
        const current = this.state.current + 1;
        this.setState({ current });
      }
      prev() {
        const current = this.state.current - 1;
        this.setState({ current });
      }
      modal_footer(current){
        return([
          <Button style={{ margin: '0 8px', display:current===0?"none":""}} type="primary"  onClick={() => this.prev()}>
            上一步
          </Button>,
          <Button style={{ margin: '0 8px', display:current!==steps.length-1?"none":""}} type="primary" onClick={this.handleOk}>
            资源挂载
          </Button>,
          <Button style={{ margin: '0 8px',display:current===steps.length-1?"none":"" }} type="primary"  onClick={() => this.next()}>
            下一步
          </Button>
          ]) 
      }
    render(){
        const { current } = this.state;
        return(
                <Modal 
                  destroyOnClose={true}
                  width='800px'
                  footer={this.modal_footer(current)}
                  visible={this.props.visible}
                  onCancel={()=>{
                    this.props.cancelDBModal();
                    this.clearCurrent();
                  }}
                  >
                   {steps[current].page}
              </Modal>
        );
    }
}
const mapStateToProps=(state)=>({

});

const mapDispatchToProps=(dispatch)=>({

});

export default connect(mapStateToProps,mapDispatchToProps)(FileConnect);